<template>
  <div class="page_login-container flex ac jc">
    <!-- 登录面板 -->
    <div class="login_panel-container flex">
      <div class="login_panel-left">
        <h3>欢迎登录XX管理平台</h3>
        <img src="@/assets/images/login-banner.png" />
      </div>
      <div class="login_panel-right">
        <h3>用户登录</h3>
        <p>欢迎使用xxx平台，输入账号密码登录</p>
        <el-form ref="loginFormRef" label-position="top" :model="form" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" :show-password="true" v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox>记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="width-full" @click="onCliickLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 底部版权 -->
    <div class="footer c9 f12 tac">Copyright © 2024 xx有限公司版权所有</div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 导入类型声明
 */
import type { LoginForm } from './types';
import type { FormRules, FormInstance } from 'element-plus';
import type { Router } from 'vue-router';

/**
 * 导入数据原型
 */
import { ModelFormData } from './model';

/**
 * 引入路由
 */
const router: Router = useRouter();

/**
 * 定义响应式数据
 */
const form = reactive<LoginForm>(ModelFormData);

/**
 * 定义页面元素
 */
const loginFormRef = useTemplateRef<FormInstance | null>('loginFormRef');

/**
 * 表单验证规则
 */
const rules = reactive<FormRules<LoginForm>>({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});

/**
 * 检验
 * @param formEl
 */
async function onCliickLogin(): Promise<void> {
  if (!loginFormRef.value) {
    return;
  }
  await loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      router.push('/dashboard');
    }
  });
}
</script>

<style lang="less" src="./index.scss" scoped></style>
